<template>
  <v-form ref="form" class="form px-7 pt-6 pb-14">
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> User ID </v-col>
      <v-col :cols="8" class="text-left">
        <v-select
          v-model="userId"
          :items="userIdItems"
          v-validate="{ required: true }"
          name="User ID"
          solo
          hide-details
          dense
          class="white-input"
        >
          <template #no-data>
            <v-skeleton-loader tile type="list-item@4"></v-skeleton-loader>
          </template>
        </v-select>
        <span class="vee-validate-error">{{ errors.first("User ID") }}</span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Device ID </v-col>
      <v-col :cols="8" class="text-left">
        <v-text-field
          v-model="deviceId"
          v-validate="{ required: true }"
          name="Device ID"
          solo
          hide-details
          dense
          class="white-input"
        >
        </v-text-field>
        <span class="vee-validate-error">{{ errors.first("Device ID") }}</span>
      </v-col>
    </v-row>
    <v-row v-if="propType === 'edit'" class="line" no-gutters>
      <v-col class="label" :cols="4"> status </v-col>
      <v-col :cols="8" class="text-left">
        <v-text-field
          v-model="status"
          v-validate="{ required: true }"
          name="status"
          solo
          hide-details
          dense
          class="white-input"
        >
        </v-text-field>
        <span class="vee-validate-error">{{ errors.first("status") }}</span>
      </v-col>
    </v-row>
  </v-form>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { Pick } from "@/common/constants/Utils";
@Component({
  components: {},
  props: {
    type: String,
  },
})
export default class AddEditDevice extends Vue {
  get propType() {
    return this.$props.type;
  }
  loading = false;
  // info
  id: string | null = "";
  userId: string | null = "";
  deviceId: string | null = "";
  status: string | null = "";
  userIdItems: string[] = [];

  getUserIdItems() {
    this.loading = true;
    setTimeout(() => {
      this.userIdItems = [
        "AL- Angela lo ",
        "KW- Ken Wong",
        "KT- Kin Fei To",
        "MW- Mark Wong",
        "MK- Mark Wong",
        "KT- Kin Fei To",
        "AC- Amy Chan",
        "NC- Nicole Chan",
        "KT- Kin Fei To",
      ];
    }, 1000);
  }

  resetForm() {
    this.id = null;
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }
  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData() {
    return Pick(this, ["id", "userId", "deviceId", "status"]);
  }
  created() {
    this.getUserIdItems();
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
